<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- /.panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw"></i> Visitors Analytics
        <div class="pull-right">
            <!-- Build your select: -->
            <div style="margin-top:-10px">
                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                <select class="multiselect">
                    <option value="1">最近一周</option>
                    <option value="2">最近两周</option>
                    <option value="3">最近三周</option>
                    <option value="4">最近四周</option>
                </select>
            </div>
        </div>
    </div>
    <!-- /.panel-heading -->
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-8">
                <div id="visitors_analytics" style="width: 350px;height:350px;"></div>
            </div>
            <!-- /.col-lg-12 (nested) -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.panel-body -->
</div>
<script src="/javascripts/echarts-all-3.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart_visitors_analytics = echarts.init(document.getElementById('visitors_analytics'));
    var data = [{
        value: 5656,
        name: 'New Visitors'
    }, {
        value: 1312,
        name: 'Return Visitors'
    }];
    // 指定图表的配置项和数据
    option_visitors_analytics = {
        backgroundColor: '#fff',
        title: {
            text: 'Visitors',
            //subtext: '(最近七天)',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
            },
            subtextStyle: {
                //   color: 'yellow',
                fontWeight: 'bold'
            }
        },
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            bottom: '0%',
            data: ['New Visitors', 'Return Visitors']
        },
        series: [{
            type: 'pie',
            selectedMode: 'single',
            radius: ['25%', '58%'],
            color: ['rgb(0,172,172)', 'rgb(52,143,226)'],

            label: {
                normal: {
                    position: 'inner',
                    formatter: '{b}:{d}%',

                    textStyle: {
                        color: 'rgb(173,173,173)',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: data
        }, {
            type: 'pie',
            radius: ['58%', '83%'],
            itemStyle: {
                normal: {
                    color: '#F2F2F2'
                },
                emphasis: {
                    color: '#ADADAD'
                }
            },
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{c}',
                    textStyle: {
                        color: '#777777',
                        fontWeight: 'bold',
                        fontSize: 14
                    }
                }
            },
            data: data
        }]
    };

    myChart_visitors_analytics.setOption(option_visitors_analytics);
</script>